<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        #box{
            width: 200px;
            height: 200px;
            background-color: red;
            position: absolute;
        }
    </style>
</head>
<body>
   <div id="box" style="left: 30px"></div>

<script>
    /*
     a) style.left只能获取行内的，而offsetLeft则可以获取到所有的；
     b) offsetLeft 可以返回没有定位盒子距离左侧的位置；而style.left不可以，其只能返回有定位盒子的left;
     c) offsetLeft 返回的是数字，而 style.left 返回的是字符串，除了数字外还带有单位：px;
     注意：可以用parseInt进行转化；比如：styleLeft='300px' ---> parseInt(styleLft) ---> 300
     d) offsetLeft是只读的，而style.left是可读写；
     e) 如果没有给 当前 元素指定过 top 样式，则 style.top 返回的是空字符串。
    */

    var box = document.getElementById("box");
    console.log(box.offsetLeft);
    console.log(parseInt(box.style.left));
    box.style.left = 200 + 'px';
    console.log(box.style.top);
    console.log(box.offsetTop);
</script>
</body>
</html>